<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>权限列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" th:href="@{/css/oksub.css}">
	<link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
  <link rel="stylesheet" th:href="@{/layui_ext/dtree/dtree.css}">
  <link rel="stylesheet" th:href="@{/layui_ext/dtree/font/dtreefont.css}">
	<script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
</head>
<body class="ok-body-scroll">
<div class="ok-body">

	<div class="layui-row">
		<div class="layui-col-md3">
				
		<!-- 树形图  -->
			<div id="permissionTree" class="demo-tree-more"></div>
		</div>
		<div class="layui-col-md9">
			<table class="layui-hide" id="permissionTable" lay-filter="permissionTable"></table>
		</div>
	</div>
</div>
<!--js逻辑-->
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:inline="none">
layui.extend({
    dtree: '{/}/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
  }).use(["element", "table", "laydate", "okUtils", "okMock",'dtree',"okLayer","okUtils"], function () {
		var table = layui.table;
		var laydate = layui.laydate;
		var okUtils = layui.okUtils;
		var dtree = layui.dtree;
		var $ = layui.jquery;
		var okMock = layui.okMock;
		okLayer = layui.okLayer;
		okUtils = layui.okUtils;
		okLoading.close();
		laydate.render({elem: '#startTime', type: "datetime"});
		laydate.render({elem: '#endTime', type: "datetime"});
		// /permission/tree
		function initPermissionTree() {
			// ajax请求数据
			    // 初始化树
			    dtree.render({
			      elem: "#permissionTree",
			      dataStyle: "layuiStyle",
			      data: permissionTree.data, // 使用data加载
			      url: "/api/network/treeList" // 使用url加载（可与data加载同时存在）
			    });
			    
			    // 绑定节点点击
			    dtree.on("node('permissionTree')" ,function(obj){
			    	if(obj.param.level == 3){
			    		layer.msg("禁止为该网点添加子网点");
			    		
			    	}else{
			    		// layer.msg(JSON.stringify(obj.param));
			    		//console.info(obj.param.id);
			    		 add(obj.param);
			    	}
			      // 
			    });
			
			//})
			
		}
		// 执行方法
		initPermissionTree();
		initPermissionTable();
		

		function initPermissionTable() {

			var	Permissiontable = table.render({
				elem: '#permissionTable',
				/* url: okMock.api.permission.list, */
				url:"/api/network/tableList",
				limit: 20,
				page: true,
				size: "sm",
				cols: [[
					{field: "networkId", title: "网点编号", width: 170, sort: true, fixed: "left"},
					{field: "networkName", title: "网点名称", width: 100},
					{
						field: "parentNetworkName",
						title: "所属网点", 
						width: 100
					},
					{field: "financeCenter", title: "财务中心", width: 150},
					/* {field: "address_id", title: "地址编号", width: 150}, */
					{field: "address", title: "详细地址", width: 200},
					{field: "area", title: "区县", width: 120
					},
					{field: "city", title: "城市", width: 100
					},
					{field: "province", title: "省份", width: 120
					},
					{field: "principalName", title: "负责员工姓名", width: 100},
					{field: "phone", title: "手机", width: 150},
					{field: "telphone", title: "座机电话", width: 150},
					{field: "remark", title: "备注", width: 150},
					{field: "financeCenterSign", title: "财务中心标识", width: 150},
					{field: "distributionCenterSign", title: "分拨中心标识", width: 150},
					{field: "type", title: "类型", width: 100 },
					{field: "createTime", title: "创建时间", width: 150},
					{field: "updateTime", title: "更新时间", width: 150},
					{title: "操作", width: 100, templet: "#operationTpl", align: "center", fixed: "right"}
				]],
				done: function (res, curr, count) {
				/* console.info(res, curr, count);   */
				}
			});
		}
		
		table.on("tool(permissionTable)", function(obj) {
			var data = obj.data;
			switch (obj.event) {
			case "edit":
				edit(data);
				break;
			case "del":
				del(data.networkId);
				break;
			}
		});
	
		function add(d) {
			okLayer.open("新增用户", "/page/network/add", "90%", "90%", function(
					layero) {
				var iframeWin = window[layero.find("iframe")[0]["name"]];
				iframeWin.initForm(d);
				
			}, function() {
				location.reload(true);
			})
		}
		
		function edit(data) {
			console.info(data);
			
				okLayer.open("更新用户", "/page/network/edit", "90%", "90%", function(
						layero) {
					var iframeWin = window[layero.find("iframe")[0]["name"]];
					iframeWin.initForm(data);
					
				}, function() {
					location.reload(true);
				})
			
		}

		function del(networkId) {
			okLayer.confirm("确定要删除吗？", function() {
				okUtils.ajax("/api/network/delete", "post", {
					nid : networkId
				}, true).done(function(response) {
					console.log(response);
					okUtils.tableSuccessMsg(response.msg);
					location.reload(true);
				}).fail(function(error) {
					console.log(error)
				});
			})
		}
		 
	});
</script>
<!-- 头工具栏模板 -->
	<script type="text/html" id="toolbarTpl">
	
</script>
<!--行工具栏模板-->
<script type="text/html" id="operationTpl">
	<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
	<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>

</body>
</html>
